<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>修改手机号码</title>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="personal_center">
        <div class="t-container t-mp-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-main">
                <form action="">
                    <div class="modify-password-content">
                        <div class="t-input-group t-tel-label">
                            <label>
                                <span>已绑定手机号码：</span>
                            </label>
                            <span v-cloak>{{tel}}</span>
                        </div>
                        <div class="t-input-group t-tel-group">
                            <input type="text" placeholder="请输入新手机号码" v-model="newtel">
                        </div>
                        <div class="t-input-group t-tel-group">
                            <input type="text" placeholder="请输入密码" v-model="newPassword">
                        </div>
                        <div class="t-input-group t-tel-group" v-show="showVer">
                            <input type="text" placeholder="请输入验证码" v-model="ver2">
                            <div class="verification-code-group">
                                <img :src="codeImg" alt="" @click="changeCodeImg">
                            </div>
                        </div>
                        <div class="t-input-group t-tel-group">
                            <input type="text" placeholder="请输入短信验证码" v-model="ver1">
                            <div class="verification-code-group">
                                <button type="button" class="get-code" @click="sendPhoneCode" :disabled="issend" v-cloak>{{codeText}}</button>
                            </div>

                        </div>

                        <div class="t-mp-footer">
                            <button type="button" @click="submit">确认</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <toast ref="toast"></toast>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>

    <script>
        var toast = new component.popup.toast();

        var app = new Vue({
            el: '#personal_center',
            data: function() {
                return {
                    header: {
                        show: !APP.iswechat()
                    },
                    tel: APP.getQueryString('tel'),
                    store_id: APP.getQueryString('storeid'),
                    shop_name: '',
                    newtel: '',
                    newPassword:'',
                    ver1: '',
                    ver2: '',
                    codeImg: APIPHP + 'index.php?r=home/index/get-verify&storeid=' + APP.getQueryString('storeid'),
                    codeTime: 60,
                    codeText: "获取验证码",
                    issend: false,
                    showVer: true
                }
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                }.bind(this), function(arg) {
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
            },
            components: {
                'toast': toast
            },
            methods: {
                goback: function() {
                    window.history.go(-1);
                },
                changeCodeImg: function() {
                    this.codeImg = APIPHP + 'index.php?r=home/index/get-verify&storeid=' + APP.getQueryString('storeid') + '&=' + (new Date()).getTime();
                },
                submit: function() {
                    var regexphone = /^1\d{10}$/;
                    if (this.newtel == ''||!regexphone.test(this.newtel)) {
                        this.$refs.toast.show("请填写有效手机号码");
                        return;
                    }
                    if (this.newPassword == '') {
                        this.$refs.toast.show("请填写账号密码");
                        return;
                    }
                    if (this.ver1 == '') {
                        this.$refs.toast.show("请填写短信验证码");
                        return;
                    }
                    if (this.showVer && this.ver2 == '') {
                        this.$refs.toast.show("请填写图形验证码");
                        return;
                    }
                    Vue.http.post(APIPHP + 'index.php?r=member/u/edit-mobile', {
                        //mobile: this.tel,
                        mobile: this.newtel,
                        password:this.newPassword,
                        sms_code: this.ver1,
                        code: this.ver2,
                        act: 1,
                        storeid: this.store_id
                    }, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.flag == 1) {
                            this.$refs.toast.show('修改成功');
                            setTimeout(function() {
                                window.history.back();
                            }, 2500);
                        } else {
                            this.$refs.toast.show(_res.body.msg);
                        }
                    }.bind(this));
                },
                sendPhoneCode: function() {
                    if (this.showVer && this.ver2 == "") {
                        this.$refs.toast.show("请输入图形验证码");
                        return false;
                    }
                    if (!this.newtel){
                        this.$refs.toast.show("请输入新手机号");
                        return;
                    };
                    if (this.issend) return;
                    if (this.codeTime == 60) {
                        var that = this;
                        Vue.http.post(APIPHP + 'index.php?r=home/index/get-sms-code&storeid=' + this.store_id, {
                            //mobile: this.tel,
                            mobile: this.newtel,
                            type: 3,
                            code: this.ver2
                        }, {
                            emulateJSON: true
                        }).then(function(_res) {
                            _re = _res.body;
                            if (_re.flag == 1) {
                                console.log(_re);
                                that.$refs.toast.show(_re.msg);
                                that.getCode();
                                that.changeCodeImg();
                            } else {
                                // if (_re.flag == -1) {
                                //     that.showVer = true;
                                // }
                                that.$refs.toast.show(_re.msg);
                            }

                        }.bind(this), function(_res) {
                            that.$refs.toast.show(_res.body.msg);
                        }.bind(this));
                    }


                },
                getCode: function() {
                    if (this.codeTime >= 0) {
                        this.codeText = this.codeTime + ' s';
                        this.codeTime--;
                        this.issend = true;
                        setTimeout(function() {
                            this.getCode();
                        }.bind(this), 1000);
                    } else {
                        this.codeText = '获取验证码';
                        this.codeTime = 60;
                        this.issend = false;
                    }
                }
            }
        })
    </script>
</body>

</html>